<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#box{width: 800px;height: 600px;background-color: blue;}
		#frist{width: 100px;height: 100px;background-color: red;}
	</style>
</head>
<body>
	<div id="box">
		<div id="frist"></div>
	</div>
</body>
<script type="text/javascript">
	var box = document.getElementById("box");
	box.onmouseover = function(){
		console.log("进洞");
	}
	box.onmouseenter = function(){
		console.log("深入");
	}
	box.onmouseout = function(){
		console.log("返回");
	}
	box.onmouseleave = function(){
		console.log("出洞");
	}
</script>
</html>